<template>
  <view>
    <u-sticky :enable="enable">
      <view class="headImg">
        <image
          src="../../static/images/terminalPic.png"
          mode="widthFix"
        ></image>
        <text>热门终端</text>
      </view>
    </u-sticky>
    <view class="terminal">
      <view
        class="listItem flex align-center"
        v-for="(item, index) in terminalList"
        :key="index"
        v-if="terminalList.length > 0"
      >
        <image :src="item.image" mode="widthFix"></image>
        <view>
          {{ item.name }}
        </view>
        <u-button
          type="warning"
          :ripple="true"
          size="medium"
          @click="$u.route('/pages/zdzc/zdzc1', item)"
          >查看详情</u-button
        >
      </view>
      <view
        class="noMachine flex align-center"
        v-if="terminalList.length == 0"
      >
        <image
          src="../../static/images/noData/zwsj.png"
          mode="widthFix"
        ></image>
        <text>暂无终端</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      enable: true,
      terminalList: {},
    };
  },
  onLoad() {
    this.getTerminalList();
  },
  onShow() {
    this.enable = true;
  },
  onHide() {
    this.enable = false;
  },
  methods: {
    //产品列表
    getTerminalList() {
      
      this.$u.api
        .productlist({
          
          all: "1",
        })
        .then((res) => {
          var datas = res.result.list;
          if (res.status == 200) {
            this.terminalList = datas;
          }
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}

.headImg {
  image {
    margin-top: -20rpx;
    width: 100%;
    // 去除图片空白
    vertical-align: middle;
  }

  text {
    position: absolute;
    top: 60rpx;
    left: 100rpx;
    letter-spacing: 3rpx;
    color: #fff;
    font-size: 48rpx;
    font-weight: 700;
  }
}

.terminal {
  position: relative;
  z-index: 9;
  padding: 30rpx;
  background-color: #fff;

  .listItem {
    position: relative;
    padding: 20rpx 30rpx;
    border-radius: 10rpx;
    box-shadow: 6rpx 8rpx 16rpx #ccc;
    margin-bottom: 40rpx;
    overflow: hidden;

    image {
      width: 160rpx;
      border: 1rpx solid #ff9900;
      border-radius: 10rpx;
    }

    view {
      width: 300rpx;
      align-self: flex-start;
      padding: 10rpx 0 0 20rpx;
    }

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 10rpx;
      background-color: #fc6306;
    }
  }

  button {
    width: 100rpx;
    margin-right: 0;
  }
}

</style>
